<template>
  <v-container class="grey lighten-3 pa-0 ">
    <v-container class="d-flex justify-center pa-0 pt-4 pb-6">
      <v-responsive
        class="  pa-0"

      >


        <v-row no-gutters class="d-flex  align-center ">
          <!-- <v-responsive
          class="d-flex justify-center   pa-0"
          :max-width="$vuetify.breakpoint.width <= 1024 ? '100%' : ($vuetify.breakpoint.width > 1024 && $vuetify.breakpoint.width) < 1920 ? '67%' : '58%'"
        > -->
          <v-col :cols="$vuetify.breakpoint.width < 768 ? 6 : 3" class="pa-2 d-flex child-flex" v-for="i in [1, 2, 3, 4, 5, 6, 7, 8, 9]" :key="i">

          <v-card
            class=""
          
            
          >
            <v-card-text class="pb-0">
              <v-row align="center" justify="center">
                <v-col cols="12" class="d-flex justify-center pa-0">
                  <v-img
                    src="https://lc-gold-cdn.xitu.io/ff55a1c3d68c5805afb4.png?imageView2/2/w/100/h/100/q/85/format/webp/interlace/1"
                    alt="Sunny image"
                    max-width="60"
                  ></v-img>
                </v-col>
              </v-row>
            </v-card-text>

            <v-list-item two-line class="pa-0">
              <v-list-item-content class="d-flex text-center">
                <v-list-item-title class="headline text-h6">
                  Ant Design
                </v-list-item-title>
                <v-list-item-subtitle
                  >6024 关注 &nbsp; 390 文章</v-list-item-subtitle
                >
              </v-list-item-content>
            </v-list-item>
            <v-card-actions class="d-flex justify-center">
              <v-btn elevation="2" outlined color="blue" v-show="focusStatus" @click="getFocus(0)">
                关注
              </v-btn>
              <v-btn depressed color="success" v-show="!focusStatus" @click="getFocus(1)">
                已关注
              </v-btn>
            </v-card-actions>
          </v-card>
          </v-col>
        </v-row>


      </v-responsive>
    </v-container>
  </v-container>
</template>

<script>
export default {
  transition: 'slide-left',
  data: () => ({
    focusStatus:0
  }),
  methods:{
    getFocus(type){

      this.focusStatus = type


    }
  },
};
</script>

<style scoped>
.item_divider {
  border-color: #f4f4f4;
}
</style>
